<script setup lang="ts">
import CateRankId from "~/contentScripts/views/sycm/market_monitor/cateRankId.vue";
import SYCM from "~/utils/ali/sycm";
import {SycmFindIndex} from "~/utils/ali/SycmIndexMap";
import Trans from "~/utils/sycm/trans";

const emit = defineEmits([
  "update:visible",
  "pause",
]);
const close = () => {
  emit("update:visible", false);
};
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});
const spinning = ref(false);
const columns = ref<any[]>([
  {
    dataIndex: 'item',
    dataType: 'product',
    dataField: {
      item_title: 'item.title',
      item_pic: 'item.pictUrl',
      item_id: 'item.itemId',
    },
    title: '商品',
    fixed: 'left',
    width: 260,
    maxWidth: 260,
  },
  {
    dataIndex: 'shop.title',
    dataType: 'custom',
    title: '店铺',
    slot: 'shop',
    fixed: 'left',
    width: 140,
  },
  {
    dataIndex: 'cateRankId.value',
    fixed: 'left',
    align: 'center',
    dataType: 'custom',
    slot: 'cateRank',
    title: SycmFindIndex('cateRankId')?.text || '行业排行',
    sorter: (a: { cateRankId: { value: number; }; }, b: { cateRankId: { value: number; }; }) => {
      try {
        return a.cateRankId.value - b.cateRankId.value;
      } catch (e) {
        if (typeof a.cateRankId == "undefined" && b.cateRankId == "undefined") {
          return 0;
        }
        if (typeof a.cateRankId == "undefined") {
          return 1;
        } else {
          return -1;
        }
      }
    },
    width: 120,
  },
  {
    dataIndex: 'tradeAmount',
    title: '交易金额',
    align: 'center',
    width: 120,
    sorter: (a: { tradeAmount: number; }, b: { tradeAmount: number; }) => a.tradeAmount - b.tradeAmount,
  },
  {
    dataIndex: 'uv',
    title: '访客数',
    align: 'center',
    width: 120,
    sorter: (a: { uv: number; }, b: { uv: number; }) => a.uv - b.uv,
  },
  {
    dataIndex: 'seIpvUv',
    title: '搜索人数',
    align: 'center',
    width: 120,
    sorter: (a: { seIpvUv: number; }, b: { seIpvUv: number; }) => a.seIpvUv - b.seIpvUv,
  },
  {
    dataIndex: 'clt',
    title: '收藏人数',
    align: 'center',
    width: 120,
    sorter: (a: { clt: number; }, b: { clt: number; }) => a.clt - b.clt,
  },
  {
    dataIndex: 'cart',
    title: '加购人数',
    align: 'center',
    width: 120,
    sorter: (a: { cart: number; }, b: { cart: number; }) => a.cart - b.cart,
  },
  {
    dataIndex: 'payRate',
    title: '支付转化率',
    align: 'center',
    width: 120,
    sorter: (a: { payRate: string; }, b: { payRate: string; }) => parseInt(a.payRate) - parseInt(b.payRate),
  },
  {
    dataIndex: 'seRate',
    title: '搜索占比',
    align: 'center',
    width: 120,
    sorter: (a: { seRate: string; }, b: { seRate: string; }) => parseFloat(a.seRate) - parseFloat(b.seRate),
  },
  {
    dataIndex: 'cltRate',
    title: '收藏率',
    align: 'center',
    width: 120,
    sorter: (a: { cltRate: string; }, b: { cltRate: string; }) => parseFloat(a.cltRate) - parseFloat(b.cltRate),
  },
  {
    dataIndex: 'cartCltRate',
    title: '加购收藏率',
    align: 'center',
    width: 120,
    sorter: (a: { cartCltRate: string; }, b: {
      cartCltRate: string;
    }) => parseFloat(a.cartCltRate) - parseFloat(b.cartCltRate),
  },
  {
    dataIndex: 'uvAmount',
    title: 'UV价值',
    align: 'center',
    width: 120,
    fixed: 'right',
    sorter: (a: { uvAmount: number; }, b: { uvAmount: number; }) => (a.uvAmount) - (b.uvAmount),
  },
  {
    dataIndex: 'payUserNumber',
    title: '支付买家数',
    align: 'center',
    width: 120,
    fixed: 'right',
    sorter: (a: { payUserNumber: number; }, b: { payUserNumber: number; }) => a.payUserNumber - b.payUserNumber,
  },
  {
    dataIndex: 'customerUnitPrice',
    title: '客单价',
    align: 'center',
    width: 120,
    fixed: 'right',
    sorter: (a: { customerUnitPrice: number; }, b: {
      customerUnitPrice: number;
    }) => a.customerUnitPrice - b.customerUnitPrice,
  },
]);
const dataSource = ref<any[]>([]);
const loadIndexMap = async () => {
  return await SYCM.getInternalFiberData('.mc-marketMonitor div.oui-card-content', 'memoizedProps.children[1].props.children.props.children[1].props.aliasIndexMap');
}
const loadDataSource = async () => {
  return await SYCM.getInternalFiberData(`#sycm-mc-mq-my-monitor-item div.oui-table-wrapper`, 'memoizedProps.children[0].props.dataSource');
}
const calcData = async () => {
  spinning.value = true;
  let _data = await loadDataSource();
  // console.log(_data);
  // 注入数据
  SYCM.assignData(_data);
  dataSource.value = _data;
  spinning.value = false;
}
watch(() => props.visible, (val) => {
  if (val) {
    spinning.value = true;
    calcData();
  }
})
</script>

<template>
  <custom-modal :visible="visible" title="市场-监控看板-商品" :footer="false" width="95%" style="top: 20px;" @cancel="close">
    <template #headerRight>
      <SYCMCustomModalHeaderNotice/>
    </template>
    <a-spin :spinning="spinning">

      <div style="max-height: calc(100vh - 150px);overflow-y: auto">
        <base-table table-name="市场-监控看板-商品" :data-source="dataSource" size="small" :columns="columns">
          <template #shop="row">
            <a-button type="link" size="small" :href="row.shop.shopUrl" target="_blank" style="font-size: 12px;">{{ row.shop.title }}</a-button>
          </template>
          <template #cateRank="row">
            <cate-rank-id :record="row"/>
          </template>
        </base-table>
      </div>
    </a-spin>
  </custom-modal>
</template>

<style scoped>

</style>
